<template>
  <view class="container">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <view slot="top">
        <view class="time-banner">
          <view
            class="time-item3"
            v-for="(item, index) in barList"
            :key="index"
            :style="item.status == 2 ? 'color:#0F76BC;' : ''"
            @click="onTabs(item)"
          >
            <p class="txt1">{{ item.startTime }}</p>
            <p class="txt1">{{ item.endTime }}</p>
            <p v-if="item.status == 1" class="txt2">未开抢</p>
            <p v-else-if="item.status == 2" class="txt2">抢购中</p>
            <p v-else class="txt2">已开抢</p>
          </view>
        </view>
      </view>

      <view class="goods-list-box" v-for="item in dataList" :key="item.id">
        <view class="goods-img-box">
          <image class="goods-img" :src="item.picUrl" mode=""></image>
        </view>
        <view class="goods-dsce">
          <view class="goods-title">
            <text>{{ item.name }}</text>
          </view>
          <view class="" style="margin: 15rpx 0">
            <u-line-progress active-color="#F54831" :percent="item.percent"></u-line-progress>
          </view>
          <view class="goods-price-info">
            <view class="goods_price"> ¥{{ (item.seckillPrice * 0.01).toFixed(2) }} </view>
            <!-- <button v-if="currentStatus == 1" @click="onRemind">提醒我</button> -->
            <button @click="onOrderDetail(item)">抢购</button>
            <!-- <button    v-else style="background-color: #e6e6e6;">已结束</button> -->
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stpe: 3,
      imgStyle: {
        width: '12rem'
      },
      currentStatus: '',
      current: 1,
      scurrent: 0,
      barList: [],
      dataList: [
        {
          status: 0
        },
        {
          status: 1
        },
        {
          status: 2
        },
        {
          status: 3
        }
      ]
    }
  },
  onLoad() {
    this.queryList(1, 10)
    let now = new Date()
    this.$u.get('/app-api/promotion/seckill-config/list').then((res) => {
      res.data.forEach((item) => {
        item.percent = Math.cbrt((item.totalStock - item.stock) / item.totalStock) * 100
        let str = item.startTime.match(/\d/g)
        let str2 = item.endTime.match(/\d/g)
        let sn = new Date(
          now.getFullYear(),
          now.getMonth(),
          now.getDate(),
          str[0] + str[1],
          str[2] + str[3],
          str[4] + str[5]
        )
        let sn2 = new Date(
          now.getFullYear(),
          now.getMonth(),
          now.getDate(),
          str2[0] + str2[1],
          str[2] + str2[3],
          str2[4] + str2[5]
        )

        if (now.getTime() > sn.getTime()) {
          if (now.getTime() > sn2.getTime()) {
            item.status = 3
          } else {
            item.status = 2
            this.queryList(1, 10, item.id)
          }
        } else {
          item.status = 1
        }
      })
      this.barList = res.data
    })
  },
  methods: {
    queryList(pageNo, pageSize, configId = '') {
      this.$u
        .get('/app-api/promotion/seckill-activity/page', {
          pageNo,
          pageSize,
          configId
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
      //this.$u.get("/app-api/promotion/seckill-activity/get-now")
    },

    initData(page, pageSize, status) {
      let self = this
      self.onOrderLoad(self.current, this.dataList, false)
    },
    onOrderLoad(current, orderList, loading) {
      if (loading) {
        this.$u.api.getOrderGroup({ filter_status: 1 }).then((res) => {
          console.log(res)
        })
        this.$refs.paging.reload()
      } else {
        this.$refs.paging.complete(orderList)
      }
    },
    onTabs(e) {
      this.current = e
      this.currentStatus = e.status
      this.queryList(1, 10, e.id)
    },
    onOrderDetail(item) {
      if (!uni.getStorageSync('userInfo')) {
        this.$utils.goToLogin()
        return
      }
      //sku_name_arr,
      let data = {
        buy_num: 1,
        goods_id: item.spuId,
        goods_name: item.name,
        image: item.picUrl,
        price: item.seckillPrice,
        seckillActivityId: item.id,
        _id: item.skuId
      }

      this.$utils.route({
        url: '/goods/order-confirm/order-confirm',
        params: {
          goods: JSON.stringify([data]),
          seckillActivityId: item.id
        }
      })
    },
    onRemind() {
      uni.dialog.confirm(
        '温馨提示',
        '前往APP,打开“日历”和“通知”权限，即可在开抢前三分钟收到秒杀提醒',
        () => {}
      )
    }
  }
}
</script>

<style>
page {
  background: #eeeeef;
}

.time-banner {
  display: flex;
  justify-content: space-around;
  background-color: #dfecf5;
  padding: 10rpx 0;
}

.time-item {
  width: 20%;
}

.time-item2 {
  width: 20%;
}

.time-item3 {
  width: 20%;
  color: #999999;
}

p {
  text-align: center;
}

.goods-list-box {
  display: flex;
  padding: 15rpx;
  background-color: #fff;
}

.goods-img-box {
  flex: 3;
}

.goods-dsce {
  flex: 7;
}

.goods-img {
  width: 200rpx;
  height: 200rpx;
}

.goods-title {
  font-size: 35rpx;
}

.goods_price {
  float: left;
  font-size: 35rpx;
  color: #f54831;
}

.goods-price-info button {
  width: 180rpx;
  float: right;
  font-size: 30rpx;
  color: #fff;
  background-color: #0f76bc;
  border-radius: 45rpx;
}

.check-color {
}
</style>
